<script setup>
import { ref } from 'vue';

const isSticky = ref(false);
const threshold = ref(100); // 触发吸顶的滚动距离

const handleScroll = (e) => {
    const scrollTop = e.detail.scrollTop;
    isSticky.value = scrollTop >= threshold.value;
};
</script>

<template>
    <scroll-view @scroll="handleScroll" scroll-y class="container">
        <!-- 普通内容 -->
        <view class="section">滚动内容区域</view>

        <!-- 吸顶元素 -->
        <view :class="['sticky-header', { 'is-sticky': isSticky }]">
            我是吸顶标题
        </view>

        <!-- 列表内容 -->
        <view v-for="i in 50" :key="i" class="item">
            条目 {{ i }}
        </view>
    </scroll-view>
</template>

<style scoped>
.container {
    height: 100vh;
}

.section {
    height: 100rpx;
    background-color: #fff;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background-color: #4CAF50;
    color: white;
    padding: 20rpx;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.is-sticky {
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}
</style>